<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-icon</title>
    <style>
        /* 
        背景八大属性
        - background：
        CSS(5)：合并
        - background-color
        - background-image
        - background-repeat
        - background-position  -  坐标点
        - background-attachment

        CSS3(3)：
       - background-size: 100%  auto   cover  contain
       - background-origin
       - background-clip： text
        
        */
        .pic {
            width: 200px;
            height: 200px;
            background-image: url(https://img13.360buyimg.com/seckillcms/s280x280_jfs/t1/124088/15/11911/114915/5f55ecfcE4d753a1b/0a6eeeb87e0b2ce7.jpg.webp);
        }

        .main .item {
            float: left;
            width: 25%;
            height: 400px;
            /* background: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg) no-repeat center; */
            background-repeat: no-repeat;
            background-position: center center;
            background-size:cover;
        }
      /*   .main .item:nth-child(1){
            background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg);
        }
        .main .item:nth-child(2){
            background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-02.jpg);
        }
        .main .item:nth-child(3){
            background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-03.jpg);
        }
        .main .item:nth-child(4){
            background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-04.jpg);
        } */
    </style>
</head>

<body>
    <div class="pic"></div>

    <div class="main">
        <div class="item" style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-01.jpg);"></div>
        <div class="item" style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-02.jpg);"></div>
        <div class="item" style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-03.jpg);"></div>
        <div class="item" style="background-image: url(https://mobike.com/cn/assets/themes/moby/img/promo-04.jpg);"></div>
    </div>
</body>

</html>